<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="asides">
        <el-col>
          <div class="logo">
            <img src="@/assets/logo.png" alt="" />
          </div>
          <el-menu
            active-text-color="#ffd04b"
            background-color="#001529"
            class="el-menu-vertical-demo"
            :default-active="$route.path"
            router
            text-color="#fff"
          >
            <el-menu-item index="/pages/LayoutContainer">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/pages/fare">
              <el-icon><Setting /></el-icon>
              <span>乘客上/下车位置</span>
            </el-menu-item>
            <el-sub-menu index="/pages">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>运力与需求订单</span>
              </template>
              <el-menu-item index="/pages/order">历史数据</el-menu-item>
              <el-menu-item index="/pages/order">实时数据</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <img src="@/assets/tou.png" class="tou" />
              <el-icon class="jt">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  width: 100%;
  min-width: 1200px;
  max-width: 1920px;
  margin: 0 auto;
  background-color: #f0f2f5;
  height: 100vh;
  overflow: hidden;
}
.el-container {
  height: 100vh;
}
.asides {
  width: 280px;
  height: 1080px;
  /* height: auto; */
  background-color: #001529;
  .el-col {
    .logo {
      height: 50px;
      display: flex;
      img {
        width: 113px;
        height: 40px;
        margin: auto;
      }
    }
    .el-menu {
      .el-icon {
        margin-left: 12px;
        padding: 0;
      }
      span {
        font-size: 16px;
      }
      .el-menu-item {
        .el-icon {
          height: 100px;
        }
      }
    }
  }
}
.el-header {
  background-color: #001529;
  width: auto;
  height: 53px;
  .el-dropdown {
    display: flex;
    width: auto;
    position: relative;
    justify-content: right;
    margin: 8px 30px 0 0;
    padding: 0;
    .el-dropdown-link {
      font-size: 16px;
      .jt {
        position: absolute;
        margin: 10px 0 0 10px;
      }
    }
  }
  .tou {
    width: 38px;
    height: 38px;
  }
}
.el-main {
  background-color: #f5f5f5;
  padding: 0;
  margin: 14px 0px 0px 14px;
  height: auto;
  width: auto;
  overflow: auto;
}
</style>
